<template>
  <div style="height:100%">
    <div style="height:100px;">
      <p>地图demo</p>
    </div>
    <div style="height:calc(100% - 100px);">
      <div id="container"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted,ref } from 'vue';
import G6 from '@antv/g6'
import {usePathNodeUpgrade} from './registerNode'
import {useCustomizeLayout,useStaticUpgradeEdge} from './registerLayout'
import {noteTypeList,nodeAttrsList}  from './const'
import {api} from './request'
import nodesData  from './jsonData/nodes.json'
import edgeData from './jsonData/edge.json'
const nodes=ref([])
nodes.value=[]
const edges=ref([])
useCustomizeLayout()
useStaticUpgradeEdge()
usePathNodeUpgrade()
const toolbar = new G6.ToolBar();
const tooltip = new G6.Tooltip({
  offsetX: 10,
  offsetY: 20,
  getContent(e) {
    const outDiv = document.createElement('div');
    let filterArr=noteTypeList.filter(item=>{
      return item.value==e.item.getModel().nodeType
    })
    let nodeAttrsLists=e.item.getModel().nodeAttrs;
    let nodeAttr=[]
    if(nodeAttrsLists.length>0){
      nodeAttr=nodeAttrsList.filter(item=>{
        return nodeAttrsLists.includes(parseInt(item.value));
      })
    }
   
    outDiv.innerHTML = `
      <h4>${nodeAttr.length>0?nodeAttr[0].label:filterArr[0].label}${e.item.getModel().qrCode}(${e.item.getModel().id})</h4>
      <ul>
        <li>X: ${e.item.getModel().x }</li>
        <li>Y: ${e.item.getModel().y }</li>
      </ul>`;
    return outDiv;
  },
  itemTypes: ['node'],
});
onMounted(() => {
  // api.get('/api/mapVersion/getLatestByMapId',{searchParams:{mapId:10}}).then(res=>{
  // res.json().then(result=>{
    // nodes.value=JSON.parse(result.data.nodes)
    // edges.value=JSON.parse(result.data.edges)
    nodes.value=nodesData;
    edges.value=edgeData;
    // 如果以下面的布局来看，grid布局是完全不看坐标节点的；
    // nodes.value=[{id:'node1',label:'node1',x:100,y:100,nodeType:1,nodeAttrs:[1,2]},
    // {id:'node2',label:'node2',x:200,y:200,nodeType:1,nodeAttrs:[1,2]}]
    // edges.value=[{source:'node1',target:'node2',label:'edge1'}]
    let width=document.getElementById('container').scrollWidth;
    let height=document.getElementById('container').scrollHeight;
    let graph=new G6.Graph({
      container:'container',
      width:width,
      height:height,
      modes: {
        default: ['drag-canvas', 'zoom-canvas','click-select'],
      },
      plugins: [tooltip,toolbar], // 配置 Tooltip 插件
      defaultEdge: {
        type: "static-upgrade-edge",
        // style:{
        //   strokeOpacity:0
        // },
        size: 1,
      },
      edgeStateStyles: {
        active:{
          stroke: '#5f95ff',       // 选中时的描边颜色
          lineWidth: 2,        // 选中时的描边宽度
        },
        selected:{
          stroke: '#5f95ff',       // 选中时的描边颜色
          lineWidth: 4,        // 选中时的描边宽度
        }
      },
      nodeStateStyles: {
        active:{
          stroke: '#5f95ff',       // 选中时的描边颜色
          lineWidth: 4,        // 选中时的描边宽度
        }
      },
      defaultNode:{
        type:'path-upgrade-node',
      },
      enabledStack: true,
      fitView: true,
      preventOverlap: true,
      fitCenter:true,
      fitViewPadding: 10,
      animate: true,
    })
    graph.data({
      nodes:nodes.value,
      edges:edges.value
    })
    graph.render()
   // 监听节点上的鼠标移动事件
    graph.on('node:mouseenter', (e) => {
      const node = e.item;
      // 清除所有节点的 active 状态
      // graph.getNodes().forEach((n) => {
      //   graph.setItemState(n, 'active', false);
      // });
      // 为当前节点设置 active 状态
      graph.setItemState(node, 'active', true);
    });

    // 鼠标移出节点时，清除 active 状态
    graph.on('node:mouseleave', (e) => {
      const node = e.item;
      graph.setItemState(node, 'active', false);
    });
    graph.on('edge:mouseenter', (e) => {
      const node = e.item;
      // 清除所有节点的 active 状态
      // graph.getEdges().forEach((n) => {
      //   graph.setItemState(n, 'active', false);
      // });
      // 为当前节点设置 active 状态
      graph.setItemState(node, 'active', true);
    });

    // 鼠标移出节点时，清除 active 状态
    graph.on('edge:mouseleave', (e) => {
      const node = e.item;
      graph.setItemState(node, 'active', false);
    });
    if (typeof window !== "undefined"){
      window.onresize = () => {
        if (!graph || graph.get("destroyed")) return;
        if (!container || !container.scrollWidth || !container.scrollHeight) return;
        graph.clear();
        graph.changeSize(container.scrollWidth, container.scrollHeight);
        graph.data({
          nodes:nodes.value,
          edges:edges.value
        })
        graph.render()
      };
    }
  // })
// })

})
</script>

<style>
/* 样式可以写在这里 */
#container {
  width: 100%;
  height: 100%;
}
/* .g6-toolbar-ul {
  position: absolute;
  top: 0px;
  left: 0px;
  visibility: hidden;
} */

</style>